<template>
  <div class="deptPosture">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <Row>
          <Col :span="4">
            <FormItem label="经营企业">
              <i-input v-model="formDataSearch.companyName" placeholder="请输入企业名称" clearable/>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem label="区县名称">
              <i-input v-model="formDataSearch.countyName" placeholder="请输入区县名称" clearable/>
            </FormItem>
          </Col>
          <FormItem>
            <Button type="primary" @click="searchSubmit">搜索</Button>
          </FormItem>
        </Row>

      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <template #extra>
<!--        <Button type="info" @click="collectType = true" style="position: relative;top: -8px;right: 10px">汇总</Button>-->
        <Button type="primary" @click="exportData" style="position: relative;top: -8px;">导出</Button>
      </template>
      <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
    </Card>

    <Modal title="汇总" v-model="collectType" width="400" :mask-closable="false" :footer-hide="true" >
      <div style="padding: 0 20px">
        <Form ref="collectRef" v-if="collectType" :model="collectData" label-position="right" :label-width="80" :rules="collectValidate">
          <FormItem label="汇总日期" prop="dateRange">
            <DatePicker type="daterange" v-model="collectData.dateRange" format="yyyy-MM-dd" placement="bottom-end" style="width: 100%" placeholder="请选择汇总日期"></DatePicker>
          </FormItem>
        </Form>
        <div style="display: flex;flex-flow: row;justify-content: flex-end;padding-bottom: 10px;">
          <Button style="margin-right: 8px" @click="collectType = false">取消</Button>
          <Button type="primary" @click="collectSubmit">确定</Button>
        </div>
      </div>
    </Modal>

  </div>
</template>
<script setup>


import {inject, onMounted, reactive, ref, resolveComponent} from 'vue'
import xdTable from '@/components/table/index.vue'
import {systemDictList} from "../../util/commonInterfaces";

const $common = inject('$common');//自己封装的方法
const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件

// 搜索
const formDataSearch = reactive({
})

// 列表数据
// 用于获取$refs
const xdTableRef = ref();
const tableData = reactive({
  url: apiUrl.supervisoryCollectRealCollectRealDeptPageList,//请求地址
  method: 'post',//请求方式
  where: {
  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  columns: [//表头数据
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: '经营企业', minWidth: 280, key: 'companyName', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.companyName}`)
      }},
    {title: '企业车辆数', minWidth: 120, key: 'vehicleCount', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.vehicleCount} 辆`)
      }},
    {title: '车辆接入数', minWidth: 120, key: 'vehicleInternetCount', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.vehicleInternetCount} 辆`)
      }},
    {title: '车辆接入率', minWidth: 120, key: 'vehicleInternetRate', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.vehicleInternetRate} %`)
      }},
    {title: '实时车辆在线数', minWidth: 140, key: 'positionOnlineVehicleNum', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.positionOnlineVehicleNum} 辆`)
      }},
    {title: '实时车辆在线率', minWidth: 140, key: 'positionOnlineVehicleRate', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.positionOnlineVehicleRate} %`)
      }},
    {title: '运营公里数', minWidth: 140, key: 'positionOperateVehicleMileage', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.positionOperateVehicleMileage} /km`)
      }},
    {title: '上线运营车辆数', minWidth: 140, key: 'positionOperateVehicleNum', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.positionOperateVehicleNum} 辆`)
      }},
    {title: '上线运营率', minWidth: 150, key: 'positionOperateVehicleRate', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.positionOperateVehicleRate} %`)
      }},
    {title: '实时省内运营车辆', minWidth: 140, key: 'areaProvinceNum', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.areaProvinceNum} 辆`)
      }},
    {title: '实时市内运营车辆', minWidth: 140, key: 'areaCityNum', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.areaCityNum} 辆`)
      }},
    {title: '实时省外运营车辆', minWidth: 150, key: 'areaOtherNum', tooltip: true,render: (h, params) => {
        return h('span', {}, `${params.row.areaOtherNum} 辆`)
      }},
    {title: '所属地区', minWidth: 180, key: 'provinceName', tooltip: true, render: (h, params) => {
        return h('span', {}, `${params.row.provinceName} - ${params.row.cityName} - ${params.row.countyName}`)
      }},
  ],
  pagingParameters: {// 分页参数
    page: 'pageNo',
    limit: 'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
})

const state = reactive({
  carPlateColor: [
    {codeNumber: 1, color: 'primary', desc: '蓝色'},
    {codeNumber: 2, color: 'warning', desc: '黄色'},
    {codeNumber: 3, color: 'black', desc: '黑色'},
    {codeNumber: 4, color: ' ', desc: '白色'},
    {codeNumber: 5, color: 'success', desc: '绿色'},
    {codeNumber: 93, color: '#87d068', desc: '黄绿色'},
    {codeNumber: 9, color: 'cyan', desc: '其他'}
  ],//车辆颜色
  transportTypeList:[],//经营类型
  personTypeList: [],//从业类型
  selectData: {},//选中数据
  formOperation: false,//弹框状态
  formTitle: '',//弹框标题
  formData: {
    username: 'gtjt_llb',
    password: 'sersllb123',
  },//表单数据
});

onMounted (async() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
  state.transportTypeList = await systemDictList({type: 'transport_type'})
})

//搜索方法
const searchSubmit = () => {
  let data = Object.assign({},formDataSearch);
  if (data.datarange){
    data.operateStartDate = $common.timeFormatting(new Date(data.datarange[0]))
    data.operateEndDate = $common.timeFormatting(new Date(data.datarange[1]))
  }
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)
}

const collectType = ref(false)
const collectData = ref({
  dateRange:[]
})
const collectRef = ref({})
const collectValidate = {
  dateRange: [{
    type: 'array',
    required: true, message: '请输入起止日期',
    fields: {
      0: {type: 'date', required: true, message: '请输入起止日期'},
      1: {type: 'date', required: true, message: '请输入起止日期'}
    }
  }],
}

const collectSubmit = () => {
  collectRef.value.validate(async (valid) => {
    if (valid){
      let data = Object.assign({},collectData.value);
      data.realStartDate = $common.timeFormatting(new Date(data.dateRange[0]))
      data.realEndDate = $common.timeFormatting(new Date(data.dateRange[1]))
      delete data.dateRange
      let msg = $ViewUIPlus.Message.loading({
        content: '汇总中...',
        duration: 0
      });
      $ViewUIPlus.Spin.show()
      $axios.post(apiUrl.supervisoryCollectRealCollectRealCitySummary,data).then((res) => {
        msg()
        if (res){
          $ViewUIPlus.Spin.hide()
          $ViewUIPlus.Message.success('汇总成功');
        }
      }).catch((err) => {
        msg()
      })
    }
  })
}

/**
 * 导出数据
 */
const exportData = () => {
  $ViewUIPlus.Modal.confirm({
    title: '导出提醒',
    content: '确定要导出数据？',
    onOk: () => {
      $ViewUIPlus.Spin.show()
      $axios.post(apiUrl.supervisoryCollectRealCollectRealDeptExport,formDataSearch).then((res) => {
        if (!!res) {
          $ViewUIPlus.Spin.hide()
          window.open(`${apiUrl.imgUrl}${res.data.data}`)
        }
      }).catch((err) => {

      })
    },
    onCancel: () => {
      //点击取消
    }
  });
}
</script>

<style lang="less">
.deptPosture {
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 41px);
  }
}
</style>
